<template>
  <h2>{{ LabelConversion }}</h2>
  <hr>
  标题: <input type="text" placeholder="请输入代办标题"> 日期: <input type="date">
  <br>

  <button style="margin-bottom: 5px;" @click="handleSubmit">提交</button>
  <button @click="handleEmpty">添加</button>
  <button @click="mock">添加模拟数据</button>
  <table>
    <thead>
      <tr>
        <td>标题</td>
        <td>日期</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody @scroll="onScroll">
      <div :style="{ height: list.length * 30 + 'px' }">
        <div :style="{ height: currentindex * 30 + 'px' }" ></div>
        <tr v-for="(item, key) in list" :key="item.id" draggable="true" 
        @dragstart="handleDragStart($event, key)"
        @dragover="handleDragOver"
        @drop="handleDrop($event, key)">
          <td>{{ item.title }}</td>
          <td>{{ item.date }}</td>
          <td>
            <button @click="add(item.id)">编辑</button>
            <button @click="upDel(item.id)">删除</button>
          </td>
        <!-- <tr v-for="item in list" :key="item.id">
          <td>{{ item.title }}</td>
          <td>{{ item.date }}</td>
          <td>
            <button @click="add(item.id)">编辑</button>
            <button @click="upDel(item.id)">删除</button>
          </td> -->
        </tr>
      </div>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      a: 1,
      currentindex: 0,
    };
  },
  created() {
    this.list = JSON.parse(localStorage.getItem('list')) || []
  },
  computed: {
    LabelConversion() {
      return this.a === 1 ? '添加' : `编辑:${this.title}`
    }
  },
  methods: {
    // 拿到拖拽的元素的索引
    handleDragStart(el, index) {
      el.dataTransfer.setData("text/plain", index);
    },
    // 拖拽到要放置的元素时, 阻止默认事件
    handleDragOver(el) {
      el.preventDefault();
    },
    // 拖拽到要放置的元素时, 获取到要放置的元素的索引, 并改变顺序
    handleDrop(el, targetIndex) {
      el.preventDefault();
      const originIndex = parseInt(el.dataTransfer.getData("text/plain"));
      // drop 时改变顺序
      const item = this.list.splice(originIndex, 1)[0];
      this.list.splice(targetIndex, 0, item);
    },
    // 点击生成模拟数据
    mock() {
      for (let i = 0; i < 400; i++) {
        this.list.push({
          title: i + '',
          date: new Date().toLocaleDateString(),
          id: new Date().getTime()
        })

      }
    },
    // 点击添加, 修改点击编辑的值,修改数据后存储到本地,并渲染到页面上
    handleEmpty() {
      this.a = 1
      this.title = ''
      this.date = ''
      document.querySelector("input[type=text]").value = ''
      document.querySelector("input[type=date]").value = ''
    },
    // 点击提交按钮, 获取到输入框的值, 存入list数组中, 
    handleSubmit() {
      // 获取标签
      let title = document.querySelector("input[type=text]").value;
      let date = document.querySelector("input[type=date]").value;
      let id = new Date().getTime();
      if (title === '' || date === '') {
        // 加个return, 防止继续执行
        return alert('好好写, 别搞事')
      }
      let obj = {
        id,
        title,
        date
      };
      // 判断a的值, 如果a的值为2, 则修改数据, 否则添加数据
      if (this.a === 2) {
        let obj = this.list.find(item => item.id === id ? obj : item)
        obj.title = document.querySelector("input[type=text]").value;
        obj.date = document.querySelector("input[type=date]").value;
      } else {
        this.a = 1
      }
      // 当a的值为1时, 添加数据
      if (this.a === 1) {
        this.list.push(obj)
      }
      // this.list.push(obj);
      // 存储到本地
      localStorage.setItem("list", JSON.stringify(this.list))
      document.querySelector("input[type=text]").value = ''
      document.querySelector("input[type=date]").value = ''
    },
    // 点击编辑获取id, 根据id获取到对应的数据, 且改变a的值, 使得标题变为编辑
    add(id) {
      // // console.log(id)
      // //点击id获取到数据
      let obj = this.list.find(item => item.id === id)
      this.title = obj.title
      this.date = obj.date
      this.a = 2
      // // 将数据渲染到页面上
      document.querySelector("input[type=text]").value = obj.title
      document.querySelector("input[type=date]").value = obj.date


    },
    //  获取到id, 删除对应的数据
    upDel(id) {
      // console.log(id) 
      this.list = this.list.filter(item => item.id !== id)
      // 重新渲染页面, 存储到本地
      localStorage.setItem("list", JSON.stringify(this.list))
    }
  }
}


</script>

<style>
table,
th,
td {
  height: 53px;
  line-height: 50px;
  padding: 0 10px;
  border: 1px solid #000;
  border-collapse: collapse;
}

tbody {
  display: block;
  width: 532px;
  height: 300px;
  overflow-y: auto;
}

td {
  display: inline-block;
  width: 150px;
  text-align: center;
}
</style>